<template>
  <cj-dialog :isShow="showCouponDialog" @closeDialog="hideCouponDialog">
    <div class="c-flex-column c-mt-80">
      <div class="c-ww520 modalBg c-br40 c-text-hidden">
        <header class="coupon-header">
          <div class="c-w100 c-fs32 c-textAlign-c c-fw-b title">{{adName}}</div>
        </header>
        <article class="c-maxh434 c-contexty-scroll c-ph24 c-pb104 c-pt15">
          <div v-if="adCoupon && adCoupon.length > 0">
            <coupon-item-com v-for="(item, index) in adCoupon" :key="index" :couponInfo="item" :showFooter="false" :size="'small'" :class="index == adCoupon.length - 1 ? '':'c-mb20'">
            </coupon-item-com>
            <!-- <div class="c-flex-row c-justify-sb c-aligni-center c-p c-br20 c-bg-white c-text-hidden c-mb16" v-for="(item,index) in adCoupon" :key="index" :class="[index == adCoupon.length - 1 ? '':'c-mb20',item.type != 1?'c-hh142':'c-hh134']">
              <section class="couponTextColor c-fs18 c-ww120 c-flex-row c-flex-center" :class="item.type != 1?'c-hh142':'c-hh134'">
                <div v-if="item.type == 1" class="c-fs26 c-fw-b">兑换券</div>
                <div v-else-if="item.type == 4" class="c-fs26 c-fw-b">抵价券</div>
                <div v-else>
                  <div v-if="item.type == 5" class="c-fw-b c-pb10 c-fs32">{{Number(item.price)}}<span class="c-fs20">折</span></div>
                  <div v-else class="c-fw-b c-pb10">{{'￥' | iosPriceFilter}}<span class="c-fs32">{{Number(item.price)}}</span></div>
                  <div class="c-textAlign-c">{{Number(item.amount) > 0 ? '满'+Number(item.amount)+'可用' : (item.type == 2 && item.couponSource == 2) || item.type == 6 ? '代金券' : '无门槛'}}</div>
                </div>
              </section>
              <section class="c-fs20 c-fc-gray c-w0 c-flex-grow1 c-ph10 c-pt16 c-textAlign-l" :class="item.type != 1?'c-hh142':'c-hh134'">
                <div class="c-fc-xblack c-fs24 c-text-ellipsis1 c-fw-b c-lh34">{{item.name}}</div>
                <div class="c-pv6 c-lh28" v-if="item.validStatus != 1 && item.validStatus != 2">
                  {{item.startAt}}-{{item.endAt}}
                </div>
                <div class="c-pv8" v-else>
                  {{item.validStatus == 1 ? ('领券当日起' + item.validPeriod + '天内可用') : ('领券次日起' + item.validPeriod + '天内可用')}}
                </div>
                <div v-if="item.type != 1">{{item.redeemType == 26 ? '适用于知识商品' : item.redeemType == 25 ? '适用于商城商品' : item.redeemType == 114 ? '适用于预约师资功能' : '指定商品可用'}}</div>
              </section>
            </div> -->
          </div>
          <div v-if="getCouponCount == 0 && adCoupon && adCoupon.length == 0" class="c-bg-white c-flex-column c-aligni-center c-pt40 c-pb48 c-br20 c-mb-32">
            <span class="c-fc-xblack c-fs24 c-textAlign-c">很遗憾！</span>
            <img class="c-ww180 c-mt24" src="https://ck-bkt-knowledge-payment.oss-cn-hangzhou.aliyuncs.com/admin/material/9_material_admin/image/public/i/wap/coupon/noCoupon.png">
          </div>
        </article>
        <footer class="c-p c-hh192 bottomBg c-flex-column c-aligni-center">
          <div class="c-ww360 c-hh64 c-lh64 c-textAlign-c go-use-butt c-fs28 c-fw-b c-spacing-3 c-center c-mt80" v-if="needPickUp && !getAlready && !isPayAward" @click="getAdCoupon">
            {{adCoupon.length > 1 ? "一键领取" : "立即领取"}}</div>
          <div v-else class="c-fc-white c-textAlign-c c-fs22 c-mt60">
            <div>{{getCouponResult}}</div>
            <div class="c-ww360 c-hh64 c-lh64 c-textAlign-c go-use-butt c-fs28 c-fw-b c-spacing-3 c-center c-mt14" @click="goToUse(getCouponResult)">{{getCouponResult == '' ? '我知道了' : '立即使用'}}</div>
          </div>
        </footer>
      </div>
      <div class="c-fc-white c-mt32 c-opacity80 c-flex-row c-flex-center">
        <i class="icon iconfont c-fs48" @click="hideCouponDialog">&#xe84e;</i>
      </div>
    </div>
  </cj-dialog>
</template>

<script>
import cjDialog from '@/plugin/cjDialog/cjDialog.vue';
import couponItemCom from "@/components/templates/couponItemCom.vue";
import { utilJs } from "@/utils/common.js"
let isLoading = false;
export default {
  name: "couponModal",
  components: {
    cjDialog,
    couponItemCom
  },
  props: {
    adName: {
      type: String,
      default: ""
    },
    adCoupon: {
      type: Array,
      default: []
    },
    showCouponDialog: {
      type: Boolean,
      default: false
    },
    osId: {
      type: Number,
      default: 0
    },
    recordType: { //1 参与开屏广告, 4定向运营计划，8 新注册运营计划, 9 打卡 10会员vip 113推荐有礼活动
      type: Number,
      default: 0
    },
    palId: {
      type: String,
      default: ''
    },
    isPayAward: {
      type: Boolean,
      default: false
    },
    signColId:{//打卡id
      type: String,
      default: ''
    },
    isVoucher: {
      // 是否是代金卷类型
      type: Boolean,
      default: false
    },
    day: {
      // 日历打卡时间
      type: String,
      default: ''
    }
  },
  beforeCreate() { },
  data() {
    return {
      getAlready: false,
      getCouponCount: 0,
    };
  },

  computed: {
    needPickUp() {
      // || this.recordType == 78 训练营改为自动发放
      return this.recordType == 1 || this.recordType == -1 || this.recordType == 9;
    },
    getCouponResult() {
      let str = '';
      if (this.recordType != 1 && this.adCoupon.length > 0) {
        str = '优惠券已经放入您的账号';
        return str;
      }
      if (this.recordType == 1 && this.getCouponCount > 0) {
        str = `领取${this.getCouponCount}张优惠劵已放入我的 --- 优惠劵`;
        return str;
      }
      // if (this.getCouponCount == 0) {
      //   str = '抢光了...';
      //   return str;
      // }
      return str;
    },
  },
  watch: {
  },
  methods: {
    // 关闭优惠券类型
    closeType() {
      utilJs.postMethod(`${global.apiurl}common/setAddRecordStatus`,
        { recordType: this.recordType },
      );
    },
    // 关闭开屏弹窗
    hideCouponDialog() {
      if (this.recordType != 1) {
        this.closeType();
      }

      this.$emit('update:showCouponDialog', false)
      this.$emit('hideCouponDialog')
    },
    goToUse(getCouponResult) {
      if (getCouponResult == '' || !getCouponResult) {
        this.$emit('update:showCouponDialog', false);
        return
      }
      let couponType = this.isVoucher ? 4 : 2;
      this.hideCouponDialog();
      this.$routerGo(this, "push", { path: "/member/myValueVoucher/myValueVoucher", query: {couponType: couponType} });
    },
    // 缓存增加优惠券弹窗id
    addCouponStorage() {
      //缓存名称 78 训练营
      let itemName = this.recordType == 78 ? 'campCoupArray' : 'showCouponDialog';
      let pushOsId = this.osId * 1;
      let couponDialogList = localStorage.getItem(itemName);
      couponDialogList = (couponDialogList && JSON.parse(couponDialogList)) || [];
      couponDialogList.length < 999 ? couponDialogList.push(pushOsId) : couponDialogList.shift();
      localStorage.setItem(itemName, JSON.stringify(couponDialogList));
    },
    // 领取开屏优惠券
    getAdCoupon() {
      if (localStorage.getItem("enableBindPhoneInRedeemCode") == 1 && !localStorage.getItem("uMobile")) {
        if (utilJs.goBindMobile()) return;
      }
      if (isLoading) {
        return;
      }
      isLoading = true;
      //获取couponStatus为0或者不存在couponStatus的优惠id
      let codeArray = this.adCoupon.filter(i => !i.couponStatus).map(c => c.redeemCodeId || c.id);
      let countArray = this.adCoupon.filter(i => !i.couponStatus).map(c => c.couponNum);
      let data = { arrRedeemCode: codeArray, osId: this.osId, type: this.recordType, palId: this.palId, arrCouponNum: countArray };
      if (this.recordType == '9') {
        data.signColId = this.signColId
        data.day = this.day || ''
      }
      if (this.recordType == 1) {
        data.source = 1; //开屏广告
      }
      if (this.recordType == 78 || this.recordType == 9) {
        data.source = 10; //完成课程获得
      }
      utilJs.postMethod(`${global.apiurl}redeemCodes/autoCollectRedeemCodeMax`, data, res => {
        isLoading = false;
        this.getAlready = true;
        this.closeType();
        if (res.data && res.data.length > 0) {
          this.getCouponCount = res.data.length;
          this.$showCjToast({
            text: "领取成功",
            type: "success",
          });
        } else {
          this.getCouponCount = 0;
        }
        this.addCouponStorage();
        this.$emit('getAdCoupon', res.data)
      }, (faliRes) => {
        if (faliRes && faliRes.data && faliRes.data.status == 13) {
          utilJs.goBindMobile();
        }
        isLoading = false;
      });
    },
  },
  activated() {
    this.getAlready = false;
    this.getCouponCount = 0;
  },
  deactivated() { }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.coupon-header {
  position: relative;
  width: 13rem;
}
.coupon-shadow {
  box-shadow: 0px 5px 10px 0px rgba(179, 30, 24, 0.12);
}
.dia-coupon-butt {
  background: url("../../../public/i/wap/coupon/button.png") no-repeat 100%;
  background-size: 100% 100%;
  color: #852f00;
  left: 50%;
  margin-left: -3.375rem;
  top: 0.8rem;
}
.go-use-butt {
  background-color: #FEE6C7;
  color: #AA3400;
  box-shadow: 0 2px 5px 0 rgba(157,34,24,0.10);
  border-radius: 1.2rem;
}
.c-pl44 {
  padding-left: 1.1rem;
}
.title {
  background: url("https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/public/i/wap/coupon/couponModalFragment1.png") no-repeat;
  background-size: 100% auto;
  color: #AA3400;
  height: 2.2rem;
  line-height: 1.6rem;
}
.modalBg {
  background: url("https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/public/i/wap/coupon/couponModalFragment2.png") no-repeat;
  background-size: 100% auto;
  background-position: center top;
  padding-top: 5.5rem;
}
.bottomBg {
  background: url("https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/public/i/wap/coupon/couponModalFragment3.png") no-repeat;
  background-size: 100%;
  background-position: center top;
  margin-top: -2.8rem;
}
.c-maxh434 {
  max-height: 10.85rem;
}
.c-hh134 {
  height: 3.35rem;
}
.c-bd-r1{border-right:1px solid #f2f2f2;}
.couponTextColor {
  color: #FF4A35;
  border-right: 1px dashed #f2f2f2;
}
.c-pb104 {
  padding-bottom: 2.6rem;
}
.c-mt84 {
  margin-top: 2.1rem;
}
.c-mt-80 {
  margin-top: -2rem;
}
.c-mb-32 {
  margin-bottom: -0.8rem;
}
</style>
